<template>
	<view class="box">
		<text class="title">反馈类型</text>
		<view class="list">
			<text :class="{active:typeIndex==index}" v-for="(item,index) in types" :key="index"
				@click="handleType(index)">{{item}}</text>
		</view>
		<text class="title">反馈内容</text>
		<textarea value="" placeholder="您描述的信息越全面，问题越可能有效解决哦！" />
		<text class="title">添加截图</text>
		<view class="uploads">
			<image src="../../static/upload.png" class="upload" mode=""></image>
		</view>
		<text class="title">联系电话</text>
		<input type="number" placeholder="请输入联系电话">
	</view>
	<button class="btn">提交</button>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const types = ref(['使用体验', '功能异常', '改进建议', '其他'])
	const typeIndex = ref(0)
	const handleType = (index) => {
		typeIndex.value = index
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.box {
		width: 630rpx;
		padding: 36rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 26rpx auto;

		.title {
			display: block;
			font-size: 30rpx;
			color: #16191B;

			&::before {
				content: "*";
				color: #FF4817;
				font-size: 30rpx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			margin-top: 28rpx;
			margin-bottom: 36rpx;

			text {
				padding: 18rpx 26rpx;
				border-radius: 30rpx;
				border: 1px solid #2C2C2C;
				font-size: 26rpx;
				color: #16191B;
				margin-right: 16rpx;
			}

			.active {
				color: #FE9B23;
				border: 1px solid #FE9B23;
			}
		}
		textarea{
			width: 526rpx;
			height: 160rpx;
			background: #FAFAFA;
			border-radius: 26rpx;
			padding: 33rpx 44rpx;
			margin-top: 36rpx;
			margin-bottom: 36rpx;
			display: block;
			font-size: 26rpx;
		}
		.uploads{
			
			padding-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 36rpx;
			.upload{
				width: 197rpx;
				height: 148rpx;
				display: block;
			}
		}
		input{
			width: 614rpx;
			height: 98rpx;
			background: #FAFAFA;
			border-radius: 26rpx;
			margin-top: 36rpx;
			text-indent: 30rpx;
			font-size: 26rpx;
		}
	}
	.btn{
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254,155,35,0.25);
		border-radius: 28rpx;
		display: block;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		position: absolute;
		left: 55rpx;
		bottom: 100rpx;
	}
</style>